<template>
    <div class="comment">
        <van-nav-bar
        title="评论"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="cont">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            
                <!-- <div class="head">
                    <div class="text">
                        {{type.title}} 
                        <span>259</span>
                    </div>
                    <div class="type" @click="binType">
                        <van-icon name="wap-nav" />
                        {{type.typeText}}
                    </div>
                </div> -->
                <comm v-for="(item,i) in commentList" :key="i" :data='item' />
            </van-list>
        </div>
    </div>
</template>

<script>
import comm from '@/components/comment.vue'
    export default {
        name:'comment',
        components:{
            comm
        },
        data() {
            return {
                id:'',
                commentList:[],
                num:1,
                loading: false,
                finished: false,
                type:
                    {
                        id:3,
                        title:'热门评论',
                        typeText:'按热门'
                    }
            };
        },
        created(){
            this.id = this.$route.query.id;
            
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onLoad() {
                this.axios({
                    url:'ReplyMain',
                    params:{
                        oid:this.id,
                        ps:20,
                        next:this.num
                    }
                }).then((res)=>{
                    if (res.status === 200) {
                        
                        this.commentList.push(...res.data.data.replies)
                        this.num +=1;
                        this.loading=false;
                        if (res.data.data.replies.length < 20) {
                            this.loading = true;
                        }
                    }
                }).catch(err =>{
                    
                })
            },
            binType(){
                if (this.type.id===3) {
                    this.type = {
                        id:2,
                        title:'最新评论',
                        typeText:'按最新'
                    }
                }else{
                    this.type = {
                        id:3,
                        title:'热门评论',
                        typeText:'按热门'
                    }
                }
                this.num = 1;
                this.axios({
                    url:'ReplyMain',
                    params:{
                        oid:31033,
                        ps:20,
                        next:this.num,
                        mode:this.type.id
                    }
                }).then((res)=>{
                    if (res.status === 200) {
                        
                        this.commentList = res.data.data.replies
                    }
                }).catch(err =>{
                    
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .comment{
        width: 100%;
        .cont{
            width: 100%;
            height: calc(100vh - 46px);
            overflow: auto;
            .head{
                width: 100%;
                padding: 5px 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                .text{
                    font-size: 14px;
                    span{
                        font-size: 12px;
                        line-height: 15px;
                        padding: 0 2px;
                        border-radius: 15px;
                        color: #91939b;
                        border: 1px solid #91939b;
                    }
                }
                .type{
                    font-size: 14px;
                    color: #91939b;
                }
            }
        }
    }
</style>